<template>
  <div>
    <pform ref="form" :model="form" >
      <!-- 表单项 -->
      <el-form-item label="区域">
        <el-select class="w233" size="small" v-model="form.field1" placeholder="请选择区域">
            <el-option
              v-for="item in option"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="缓存类型">
        <el-radio-group v-model="form.field2">
          <el-radio-button label="Redis"></el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="CPU架构">
        <el-radio-group v-model="form.field3">
          <el-radio-button label="X86计算"></el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="版本号">
        <el-radio-group v-model="form.field4">
          <el-radio label="6.0"></el-radio>
          <el-radio label="5.0"></el-radio>
          <el-radio label="4.0"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="实例类型">
        <div>
          <el-radio-group v-model="form.field5">
            <el-radio-button label="单机"></el-radio-button>
            <el-radio-button label="主备"></el-radio-button>
            <el-radio-button label="proxy集群"></el-radio-button>
            <el-radio-button label="Cluster集群"></el-radio-button>
          </el-radio-group>
        </div>
        <div v-show="form.field5=='单机'">数据单副本 | 不支持备份 | 不支持持久化</div>
        <div v-show="form.field5=='主备'">支持备份 | 支持故障自动切换 | 支持持久化</div>
        <div v-show="form.field5=='proxy集群'">数据双副本 | 支持分片 | 支持备份 | 支持故障自动切换 | 支持持久化</div>
        <div v-show="form.field5=='Cluster集群'">支持分片 | 支持备份 | 支持故障自动切换 | 支持持久化</div>
      </el-form-item>
      <el-form-item label="副本数" v-show="['主备','Cluster集群'].includes(form.field5)">
        <el-input-number size="small" class="w215" v-model="form.field6" :min="1" ></el-input-number>
      </el-form-item>
      <el-form-item v-show="form.field5=='单机'" label="可用区">
        <el-select class="w233" size="small" v-model="form.field7" placeholder="请选择区域">
            <el-option label="可用区1" value="可用区1"></el-option>
            <el-option label="可用区2" value="可用区2"></el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="规格选择模式" v-show="['proxy集群','Cluster集群'].includes(form.field5)">
        <el-radio-group v-model="form.field8" class="mr80">
          <el-radio label="快速选择"></el-radio>
          <el-radio label="自定义分片"></el-radio>
        </el-radio-group>
        <el-select size="small" class="w215" v-show="form.field8=='自定义分片'" v-model="form.field9" placeholder="请选择单分片容量">
          <el-option label="1G" value="1G"></el-option>
          <el-option label="2G" value="2G"></el-option>
          <el-option label="5G" value="5G"></el-option>
          <el-option label="6G" value="6G"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="主可用区" v-show="['主备','proxy集群','Cluster集群'].includes(form.field5)">
        <el-select class="w233" size="small" v-model="form.field10" placeholder="请选择区域">
            <el-option label="可用区1" value="可用区1"></el-option>
            <el-option label="可用区2" value="可用区2"></el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="备可用区" v-show="['主备','proxy集群','Cluster集群'].includes(form.field5)">
        <el-select class="w233" size="small" v-model="form.field11" placeholder="请选择区域">
            <el-option label="可用区1" value="可用区1"></el-option>
            <el-option label="可用区2" value="可用区2"></el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="实例规格">
        <plist size="mini" ref="pList" :tableData="tableData" :tableColumn="tableColumn" :hasIndex="false" :hasRadioSelect="true">
        </plist>
      </el-form-item>
      <fbr></fbr>
      <el-form-item label="虚拟私有云">
        <div class="flex-c">
          <el-select size="small" class="w233 mr60" v-model="form.field12" placeholder="请选择虚拟私有云">
            <el-option label="vpc-default（192.168.0.0/16 ）" value="1"></el-option>
            <el-option label="vpc-defadsj（192.168.0.0/16 ）" value="2"></el-option>
            <el-option label="虚拟云名称（主网段）" value="3"></el-option>
          </el-select>
          <el-select size="small" class="w233" v-model="form.field13" placeholder="请选择子网">
            <el-option v-for="item in option1" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <div class="flex-c">
            <el-select size="small" class="w233 ml60" v-model="form.field30" placeholder="请选择IP分配方式">
              <el-option v-for="item in option2" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <div class="ml30">ip地址:</div>
            <el-input size="mini" class="w52" v-model="form.field31" disabled></el-input>·
            <el-input size="mini" class="w52" v-model="form.field32" disabled></el-input>·
            <el-input size="mini" class="w52" v-model="form.field33" disabled></el-input>·
            <el-input size="mini" class="w52" v-model="form.field34" placeholder="输入"></el-input>
          </div>
          <i style="font-size: 25px;margin:0 10px 0 30px;" class="el-icon-refresh-right" ></i>
          <div class="btntext" >新建虚拟私有云</div>
        </div>
      </el-form-item>
       <el-form-item label="安全组">
         <div class="flex-c">
           <el-select size="small" class="w233" v-model="form.field14" placeholder="请选择">
             <el-option v-for="item in option3" :key="item.value" :label="item.label" :value="item.value"></el-option>
           </el-select>
           <i style="font-size: 25px;margin:0 10px 0 30px;" class="el-icon-refresh-right"></i>
           <div class="btntext">新建安全组</div>
         </div>
       </el-form-item>
      <el-form-item label="名称">
        <el-input size="small" class="w233" v-model="form.field15" placeholder="请输入"></el-input>
      </el-form-item>
      <fbr></fbr>
      <el-form-item label="访问方式">
        <el-radio-group v-model="form.field16">
          <el-radio label="密码访问"></el-radio>
          <el-radio label="免密访问"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="密码" v-show="form.field16=='密码访问'">
        <el-input size="small" show-password class="w233" v-model="form.field17" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" v-show="form.field16=='密码访问'">
        <el-input size="small" show-password class="w233" v-model="form.field18" placeholder="请再次输入密码"></el-input>
      </el-form-item>
      <fbr></fbr>
      <el-form-item label="参数配置">
        <el-radio-group v-model="form.field19" class="mr80">
          <el-radio label="系统默认"></el-radio>
          <el-radio label="使用自定义模板"></el-radio>
        </el-radio-group>
        <el-select v-show="form.field19==='使用自定义模板'" size="small" class="w233" v-model="form.field20" placeholder="请选择">
          <el-option label="模板名称1" value="模板名称1"></el-option>
          <el-option label="模板名称2" value="模板名称2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="自动备份">
        <el-radio-group v-model="form.field21">
          <el-radio label="开启"></el-radio>
          <el-radio label="关闭"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="数量">
        <el-input-number size="small" class="w215" v-model="form.field22" :min="1" ></el-input-number>
      </el-form-item>
    </pform>
  </div>
</template>

<script>
export default{
    data() {
      return {
        tableData:[{
          aaa:'redis.single.xu1.tiny.512',
          bbb:'512MB',
          ccc:'1',
          ddd:'512MB',
          eee:'10,000/10,000',
          fff:'80/80 Mbits',
          ggg:'256',
          hhh:'1',
        },{
          aaa:'redis.single.xu1.tiny.512',
          bbb:'512MB',
          ccc:'1',
          ddd:'512MB',
          eee:'10,000/10,000',
          fff:'80/80 Mbits',
          ggg:'256',
          hhh:'1',
        }],
      tableColumn: [
        {
          field: "aaa",
          label: "规格名称",
          width: "150"
        },
        {
          field: "bbb",
          label: "规格",
          width: "150"
        },
        {
          field: "ccc",
          label: "分片数",
          width: "150"
        },
        {
          field: "ddd",
          label: "最大可用内存",
          width: "150"
        },
        {
          field: "eee",
          label: "最大连接数(默认/可配)",
          width: "150"
        },
        {
          field: "fff",
          label: "基准/最大带宽",
          width: "150"
        },
        {
          field: "ggg",
          label: "DB 数",
          width: "150"
        },
        {
          field: "hhh",
          label: "占用IP数",
          width: "150"
        },
      ],
        form: {
          field1:'',
          field2:'Redis',
          field3:'X86计算',
          field4:'6.0',
          field5:'单机',
          field6:1,
          field7:'',
          field8:'',
          field9:'',
          field10:'',
          field11:'',
          field12:'',
          field13:'',
          field14:'',
          field15:'',
          field16:'密码访问',
          field17:'',
          field18:'',
          field19:'',
          field20:'',
          field21:'',
          field22:'',
          field23:'',
          field30:'',
          field31:'198',
          field32:'21',
          field33:'21',
          field34:'',
        },
        option:[
          {label:'东南中心',value:'1111'},
          {label:'南方中心',value:'2222'},
          {label:'北方中心',value:'3333'},
        ],
        option1:[
          {label:'vpc-default（192.168.0.0/16 ）',value:'1111'},
          {label:'vpc-defadsj（192.168.0.0/16 ）',value:'2222'},
          {label:'虚拟云名称（主网段）',value:'3333'},
        ],
        option2:[
          {label:'自动分配IP',value:'1111'},
          {label:'手动分配IP',value:'2222'},
        ],
        option3:[
          {label:'Sys-FullAccess',value:'1111'},
          {label:'Sys-FullAccess',value:'2222'},
          {label:'安全组名称',value:'3333'},
        ],
      }
    },
    methods: {
      init() {},
      getFormData() {
        return JSON.parse(JSON.stringify(this.form))
      },
    }

  }
</script>

<style scoped lang="less">
.w52{
  margin: 0 3px;
  width:52px;
  /deep/.el-input__inner{
    padding: 0 8px 0 12px;
  }
}
</style>
